<template>
    <div>
        <el-drawer
            :model-value.sync="isEditPointDrawerShow"
            direction="rtl"
            :close-on-press-escape="false"
            :before-close="handleClose"
            size="584px"
            :close-on-click-modal="false"
        >
            <template #title>
                <h4>{{ optionInfo.alias[signType] }}</h4>
            </template>
            <template #default>
                <div v-loading="loading" class="point">
                    <screen :pointType="pointType" ref="ruleFormRef" :item="optionInfo.ponitItem" :sign-type="signType" type="edit"></screen>
                </div>
            </template>
            <template #footer>
                <div style="flex: auto">
                    <el-button @click="handleClose">
                        取消
                    </el-button>
                    <el-button type="primary" :loading="dialogBtnLoading" @click="onEditPoint">
                        确认
                    </el-button>
                </div>
            </template>
        </el-drawer>
        <CostEntry v-if="isCostEntryShow" v-model="isCostEntryShow" :premisesData="optionInfo.ponitItem"></CostEntry>
        <TipsDailog
            title="提示信息"
            content="该楼盘无合同信息，修改失败！"
            :dialog-visible="dialogVisible"
            @onClose="dialogVisible = false"
        >
            <el-button @click="dialogVisible = false"> 取消 </el-button>
            <el-button type="primary" @click="dialogVisible=false;isCostEntryShow=true">
                前往录入
            </el-button>
        </TipsDailog>
    </div>
</template>

<script lang="ts" setup>
import { watch, reactive, ref, defineEmits, defineProps } from 'vue';
import {
    updateInnerPoint,
    updateInnerBox,
    updateOutPoint,
    updateOutBox,
    updateGattingMedia,
    updateBarrierMedia,
    queryPremisesContracts,
} from '@/api/point';
import {
    queryInnerPointByEleId,
    queryInnerBoxByEleId,
    queryOutPointByFloorId,
    queryOutBoxByFloorId,
    queryBarrierMediaByGatewayId,
    queryGatewayMediaByGatewayId,
} from '@/api/point';
import screen from './Screen.vue';
import CostEntry from './CostEntry.vue';
import TipsDailog from '@/components/TipsDailog.vue';
import { PointData } from './pointType';
import type { FormInstance } from 'element-plus';
import { ElMessage } from 'element-plus';

const emits = defineEmits(['onEditPointConfirm', 'update:isEditPointDrawerShow']);
const ruleFormRef: any = ref<FormInstance>();
const props = defineProps({
    isEditPointDrawerShow: {
        type: Boolean,
        default: false,
    },
    // signType 签约类型: 1:梯内屏, 2:梯外屏, 3:梯内框, 4:梯外框, 5: 门禁, 6: 道闸
    signType: {
        type: [String, Number],
        default: '',
    },
    pointType: {
        type: String,
        default: 'door',
    },
    id: {
        type: String,
        default: '',
    },
});
const optionInfo = reactive(new PointData());
const dialogBtnLoading = ref(false);
const dialogVisible = ref(false)
const loading = ref(false);
const isCostEntryShow = ref(false);
const premiseId = ref('');
// 编辑点位更新点位数据的接口
const handleUpdateQuery = {
    1: updateInnerPoint,
    2: updateOutPoint,
    3: updateInnerBox,
    4: updateOutBox,
    5: updateGattingMedia,
    6: updateBarrierMedia,
};
const onEditPoint = async (): Promise<void> => {
    if(+optionInfo.ponitItem.status===4){
        const data = await queryPremisesContracts({ premiseId: premiseId.value, terminalType: props.signType});
        if(!data.length){
            dialogVisible.value = true
            return false
        }
    } 
    ruleFormRef.value && await ruleFormRef.value.submitForm();
    dialogBtnLoading.value = true;
    try {
        await handleUpdateQuery[props.signType]({ ...optionInfo.ponitItem });
        dialogBtnLoading.value = false;
        ElMessage.success('编辑点位成功');
        emits('update:isEditPointDrawerShow', !props.isEditPointDrawerShow);
        emits('onEditPointConfirm');
    } catch {
        dialogBtnLoading.value = false;
    }
};
// 获取编辑点位的各类型的数据接口，获取点位详情
const handlePointQuery = {
    1: queryInnerPointByEleId,
    2: queryOutPointByFloorId,
    3: queryInnerBoxByEleId,
    4: queryOutBoxByFloorId,
    5: queryGatewayMediaByGatewayId,
    6: queryBarrierMediaByGatewayId,
};
const onEditPointInfo = async (): Promise<void> => {
    loading.value = true;
    const res = await handlePointQuery[props.signType]({ pointId: props.id });

    optionInfo.ponitItem = res ? res[0] : {};
    premiseId.value = res[0].premisesId;
    loading.value = false;
};

const handleClose = () => {
    emits('update:isEditPointDrawerShow', !props.isEditPointDrawerShow);
};
// 监听点位变化，获取点位详情
watch(
    () => props.isEditPointDrawerShow,
    (isEditPointDrawerShow) => {
        if (isEditPointDrawerShow && props.id && props.signType) {
            onEditPointInfo();
        }
    }
);
</script>

<style lang="scss" scoped>
.point {
    position: relative;
    span {
        position: absolute;
        right: 15px;
        top: 15px;
        font-size: 15px;
        color: #e60044;
        cursor: pointer;
    }
}
</style>
